﻿@inject IWorkContextAccessor workContextAccessor
@inject StoreInformationSettings StoreInformationSettings
@inject CommonSettings CommonSettings
@{
    var supportRtl = workContextAccessor.WorkContext.WorkingLanguage.Rtl;
}
<div class="header-nav">
    <nav class="navbar navbar-light navbar-expand">
        <b-container id="header-container">
            <div class="menu-container">
                <template>
                    <button aria-label="menu-toggler" class="btn menu-toggler" v-b-toggle.sidebar-menu>
                        <span></span><span></span><span></span>
                    </button>
                    <b-sidebar id="sidebar-menu"
                               backdrop
                               shadow
                               @if (supportRtl)
                               {
                                   <text>right</text>
                               }>
                        <ul class="Menu -vertical">
                            @await Component.InvokeAsync("Menu")
                        </ul>
                    </b-sidebar>
                </template>
            </div>
            <partial name="Partials/Logo"/>
            <ul class="navbar-nav top-header-items order-3">
                <template>
                    <li class="nav-item">
                        <span class="nav-link">
                            <template>
                                <b-form-checkbox size="lg" v-model="darkMode" name="contrast-button" class="contrast-switch" switch>
                                    <b-icon icon="sun" class="light" variant="info"></b-icon>
                                    <b-icon icon="moon" class="dark" variant="dark"></b-icon>
                                </b-form-checkbox>
                            </template>
                        </span>
                    </li>
                </template>
                <li class="nav-item">
                    <a href="#" target="_self" class="nav-link">
                        <b-icon icon="search" :variant="[darkMode ? 'white' : 'dark']" v-b-modal.search-box></b-icon>
                    </a>
                </li>
                <b-modal id="search-box" ref="search-box" :dark-theme="darkMode" @@shown="vm.$refs.searchBoxInput.focus()"
                         hide-footer hide-header size="xl">
                    @await Component.InvokeAsync("SearchBox")
                </b-modal>
                <template>
                    <li class="nav-item">
                        <span class="nav-link">
                            <b-icon icon="person-circle" :variant="[darkMode ? 'white' : 'dark']" v-b-toggle.sidebar-right></b-icon>
                        </span>
                        <template>
                            <b-sidebar id="sidebar-right" body-class="user-panel" title="@Loc["Account.MyAccount"]"
                                       @if (!supportRtl)
                                       {
                                           <text>right</text>
                                       }
                                       backdrop>
                                <div class="d-inline-flex flex-wrap mb-2">
                                    <partial name="Partials/Selector_TaxType"/>
                                    <partial name="Partials/Selector_Currency"/>
                                    <partial name="Partials/Selector_Language"/>
                                    @if (CommonSettings.AllowToSelectStore)
                                    {
                                        <partial name="Partials/Selector_Store"/>
                                    }
                                    <partial name="Partials/Selector_Store"/>
                                    @if (StoreInformationSettings.AllowCustomerToSelectTheme)
                                    {
                                        <partial name="Partials/Selector_Theme"/>
                                    }
                                    @await Component.InvokeAsync("Widget", new { widgetZone = "header_selectors" })
                                </div>
                                <partial name="Partials/HeaderLinks"/>
                            </b-sidebar>
                        </template>
                    </li>
                </template>
                <partial name="Partials/ShoppingCartLinks"/>
            </ul>
        </b-container>
    </nav>
</div>